<template>
  <div class="label-container">
    <div class="dashboard-text">
      <div class="lef">
        <i />
        用户热度标签管理
      </div>
    </div>
    <panel class="data-list">
      <div slot="header" class="dhead">数据列表</div>
      <div class="daction">
        <ul class="dacon">
          <li @click="addlevelDialog=true">添加用户热度标签</li>
          <!-- <li>导出数据</li> -->
          <!-- <li class="con">
            <el-select v-model="showVal" filterable placeholder="显示条数">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </li>
          <li class="con">
            <el-select v-model="sortVal" filterable placeholder="排序方式">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </li>-->
        </ul>
      </div>
      <div class="data-bd">
        <el-table
          ref="multipleTable"
          :data="rdtagData"
          tooltip-effect="dark"
          style="width: 100%"
          class="table-class"
          :header-cell-style="{
            'background-color': '#fafafa',
            'color':'#333',
            'height':'56px',
            'line-height':'56px',
            'font-size':'14px',
            'background': 'rgba(242, 242, 242, 1)'
          }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="100" align="center" />
          <el-table-column label="标签名称" width="300" align="center">
            <template slot-scope="scope">{{ scope.row.tagName }}</template>
          </el-table-column>
          <el-table-column prop="userCount" label="用户人数" width="300" align="center" />
          <el-table-column prop="tagCondition" label="自动打标签条件" show-overflow-tooltip align="center">
            <template slot-scope="scope">
              <!-- <div v-for="(a, i) in scope.row.tagCondition" :key="i">
                  <p v-if="a.index==1">{{a.date}}日累计查看/发布信息:{{a.count}}条</p>
                  <p v-if="a.index==2">{{a.date}}日累计获得金币{{a.count}}</p>
                  <p v-if="a.index==3">{{a.date}}日累计在线时长{{a.count}}分钟</p>
              </div>-->
              <div v-for="(a, i) in scope.row.tagCondition" :key="i">
                <p v-if="a.index==1">{{ a.date }}日累计被查看:{{ a.count }}次</p>
                <p v-if="a.index==2">{{ a.date }}日累计被关注:{{ a.count }}次</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="action"
            label="操作"
            show-overflow-tooltip
            align="center"
            width="150"
          >
            <template slot-scope="scope">
              <div
                class="action"
                style="width:86px;height:75px;color:#488DFF;text-align:center;margin:0 auto"
              >
                <p>
                  <el-button
                    type="text"
                    @click="editlevelDialog=true,handleClick(scope.$index, scope.row)"
                  >编辑</el-button>
                </p>
                <p>
                  <el-button
                    type="text"
                    style="color:#FF2C2C"
                    @click="handleDelete(scope.row.tagCode)"
                  >删除</el-button>
                </p>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </panel>
    <!-- fenye -->
    <div class="pagination-block">
      <div class="del-button" @click="delSelectTag">批量删除</div>
      <el-pagination
        prev-text="上一页"
        next-text="下一页"
        :background="true"
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next,slot, jumper"
        :total="this.dataTotal?this.dataTotal:0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
        <div class="page-number" layout="slot">
          <!-- <p>共17页\100条数据</p> -->
          <div class="jump-button">跳至</div>
        </div>
      </el-pagination>
    </div>
    <!-- 编辑标签类型对话框 -->
    <div class="dialog">
      <el-dialog title="提示" :visible.sync="editlevelDialog" width="844px" top="30vh" center>
        <div slot="title" class="header-title">
          <div class="lef">
            <i />
            <span v-show="labelname" class="title-name">{{ labelname }}</span>
          </div>
        </div>
        <div class="dialog-bd">
          <el-form
            ref="ruleForm"
            :model="ruleForm"
            :rules="rule"
            :inline="true"
            label-width="180px"
            class="demo-ruleForm"
          >
            <p>
              <el-form-item label="标签名称:" prop="name">
                <el-input v-model="ruleForm.name" style="width:410px" placeholder="请输入用户标签名称" />
              </el-form-item>
            </p>
            <p>
              <el-col :span="11">
                <el-form-item label="自动打标签条件:" prop="condion1">
                  <el-input v-model="ruleForm.condion1" style="width:120px" placeholder="请输入数量" />
                  日
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="累计被查看:" prop="condion2">
                  <el-input v-model="ruleForm.condion2" style="width:120px" placeholder="请输入数量" />
                </el-form-item>
              </el-col>
            </p>
            <p>
              <el-col :span="11">
                <el-form-item label="或者:" prop="condion3">
                  <el-input v-model="ruleForm.condion3" style="width:120px" placeholder="请输入数量" />
                  日
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="累计被关注：" prop="condion4">
                  <el-input v-model="ruleForm.condion4" style="width:120px" placeholder="请输入数量" />
                </el-form-item>
              </el-col>
            </p>
          </el-form>
          <!-- <p>
            <i style="color:red">*</i>
            <label class="editlabel">等级名称:</label>
            <input type="text" style="width:348px;margin-left: -8px;" class="p1" placeholder="新热用户"/>
          </p>
          <p>
            <label class="editlabel">自动打标签条件：</label>
            <input type="text" style="width:100px" placeholder="请输入数量" />
            <label>日累计被查看</label>
            <input type="text" style="width:100px" placeholder="请输入数量" />
            次
          </p>
          <p>
            <label class="editlabel">或者</label>
            <input type="text" style="width:100px" placeholder="请输入数量" />
            <label>日累计被关注</label>
            <input type="text" style="width:100px" placeholder="请输入数量" />
            次
          </p>-->
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button
            style="width: 100px;height: 40px;background: rgba(204, 204, 204, 1);border-radius: 2px;"
            @click="editlevelDialog = false"
          >取 消</el-button>
          <el-button
            type="primary"
            style="width: 100px;height: 40px;background:rgba(72,141,255,1);border-radius: 2px;"
            @click="editsubmitForm('ruleForm')"
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 添加标签类型对话框 -->
    <div class="dialog">
      <el-dialog title="提示" :visible.sync="addlevelDialog" width="844px" top="30vh" center>
        <div slot="title" class="header-title">
          <div class="lef">
            <i />
            <span v-show="editname" class="title-name">{{ editname }}</span>
          </div>
        </div>
        <div class="dialog-bd">
          <el-form
            ref="ruleForm1"
            :model="ruleForm1"
            :rules="brules"
            :inline="true"
            label-width="180px"
            class="demo-ruleForm"
          >
            <p>
              <el-form-item label="等级名称:" prop="bname">
                <el-input v-model="ruleForm1.bname" style="width:410px" placeholder="请输入用户标签名称" />
              </el-form-item>
            </p>
            <p>
              <el-col :span="11">
                <el-form-item label="自动打标签条件:" prop="bcondion1">
                  <el-input v-model="ruleForm1.bcondion1" style="width:120px" placeholder="请输入数量" />
                  日
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="累计被查看:" prop="bcondion2">
                  <el-input v-model="ruleForm1.bcondion2" style="width:120px" placeholder="请输入数量" />
                </el-form-item>
              </el-col>
            </p>
            <p>
              <el-col :span="11">
                <el-form-item label="或者:" prop="bcondion3">
                  <el-input v-model="ruleForm1.bcondion3" style="width:120px" placeholder="请输入数量" />
                  日
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="累计被关注：" prop="bcondion4">
                  <el-input v-model="ruleForm1.bcondion4" style="width:120px" placeholder="请输入数量" />
                </el-form-item>
              </el-col>
            </p>
          </el-form>
          <!-- <p>
            <i style="color:red">*</i>
            <label class="editlabel">等级名称:</label>
            <input type="text" style="width:348px;margin-left: -8px;" class="p1" placeholder="请输入用户标签名称"/>
          </p>
          <p>
            <label class="editlabel">自动打标签条件：</label>
            <input type="text" style="width:100px" placeholder="请输入数量" />
            <label>日累计被查看</label>
            <input type="text" style="width:100px" placeholder="请输入数量" />
            次
          </p>
          <p>
            <label class="editlabel">或者</label>
            <input type="text" style="width:100px" placeholder="请输入数量" />
            <label>日累计被关注</label>
            <input type="text" style="width:100px" placeholder="请输入数量" />
            次
          </p>-->
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button
            style="width: 100px;height: 40px;background: rgba(204, 204, 204, 1);border-radius: 2px;"
            @click="addlevelDialog = false,cancel('ruleForm1')"
          >取 消</el-button>
          <el-button
            type="primary"
            style="width: 100px;height: 40px;background:rgba(72,141,255,1);border-radius: 2px;"
            @click="addsubmitForm('ruleForm1')"
          >确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  getTagList,
  delTagList,
  getsaveTag,
  editTagList
} from '@/api/usermanage'
import axios from '@/utils/request'

import { freemem } from 'os';
['reload']
export default {
  inject: ['reload'],
  data() {
    var checkNum = (rule, value, callback) => {
      var bool = /^[1-9]\d*$/.test(value) && value > 0
      if (!bool) {
        return callback(new Error('请输入大于0的整数'))
      } else {
        callback()
      }
    }

    var checkWord = (rule, value, callback) => {
      var bool = /^[\u4e00-\u9fa5]+$/.test(value)
      if (!bool) {
        return callback(new Error('非法输入'))
      } else {
        callback()
      }
    }
    return {
      tagType: '',
      code: '',
      id: '',
      // 添加
      ruleForm1: {
        bname: '',
        bcondion1: '',
        bcondion2: '',
        bcondion3: '',
        bcondion4: '',
        bcondion5: '',
        bcondion6: '',
        type: []
      },
      brules: {
        bname: [
          { validator: checkWord, trigger: 'blur' }
          // { required: true, message: '请输入标签名称', trigger: 'blur' },
          // {
          //   validator: (rule, value, callback) => {
          //     var reg = /^[\u4e00-\u9fa5]{1,}$/g
          //     if (reg.test(value)) {
          //       callback(new Error('非法输入'))
          //     } else {
          //       ('blur')
          //       callback()
          //     }
          //   },
          //   trigger: 'blur'
          // }
        ],
        bcondion1: [
          { validator: checkNum, trigger: 'blur' }
        ],
        bcondion2: [
          { validator: checkNum, trigger: 'blur' }
        ],
        bcondion3: [
          { validator: checkNum, trigger: 'blur' }
        ],
        bcondion4: [
          { validator: checkNum, trigger: 'blur' }
        ],
        bcondion5: [
          { validator: checkNum, trigger: 'blur' }
        ],
        bcondion6: [
          { validator: checkNum, trigger: 'blur' }
        ]
        // bcondion1: [
        //   { required: true, message: "请输入数字", trigger: "blur" },
        //   {
        //     validator: (rule, value, callback) => {
        //       var reg = /^\s*$/g;
        //       if (reg.test(value)) {
        //         callback(new Error("非法输入"));
        //       } else {
        //         trigger: "blur";
        //         callback();
        //       }
        //     },
        //     trigger: "blur"
        //   }
        // ],
        // bcondion2: [
        //   { required: true, message: "请输入数字", trigger: "blur" },
        //   {
        //     validator: (rule, value, callback) => {
        //       var reg = /^\s*$/g;
        //       if (reg.test(value)) {
        //         callback(new Error("非法输入"));
        //       } else {
        //         trigger: "blur";
        //         callback();
        //       }
        //     },
        //     trigger: "blur"
        //   }
        // ],
        // bcondion3: [
        //   { required: true, message: "请输入数字", trigger: "blur" },
        //   {
        //     validator: (rule, value, callback) => {
        //       var reg = /^\s*$/g;
        //       if (reg.test(value)) {
        //         callback(new Error("非法输入"));
        //       } else {
        //         trigger: "blur";
        //         callback();
        //       }
        //     },
        //     trigger: "blur"
        //   }
        // ],
        // bcondion4: [
        //   { required: true, message: "请输入数字", trigger: "blur" },
        //   {
        //     validator: (rule, value, callback) => {
        //       var reg = /^\s*$/g;
        //       if (reg.test(value)) {
        //         callback(new Error("非法输入"));
        //       } else {
        //         trigger: "blur";
        //         callback();
        //       }
        //     },
        //     trigger: "blur"
        //   }
        // ],
        // bcondion5: [
        //   { required: true, message: "请输入数字", trigger: "blur" },
        //   {
        //     validator: (rule, value, callback) => {
        //       var reg = /^\s*$/g;
        //       if (reg.test(value)) {
        //         callback(new Error("非法输入"));
        //       } else {
        //         trigger: "blur";
        //         callback();
        //       }
        //     },
        //     trigger: "blur"
        //   }
        // ],
        // bcondion6: [
        //   { required: true, message: "请输入数字", trigger: "blur" },
        //   {
        //     validator: (rule, value, callback) => {
        //       var reg = /^\s*$/g;
        //       if (reg.test(value)) {
        //         callback(new Error("非法输入"));
        //       } else {
        //         trigger: "blur";
        //         callback();
        //       }
        //     },
        //     trigger: "blur"
        //   }
        // ]
      },
      // 编辑
      ruleForm: {
        name: '',
        condion1: '',
        condion2: '',
        condion3: '',
        condion4: '',
        condion5: '',
        condion6: '',
        type: []
      },
      rule: {
        name: [
          { required: true, message: '请输入标签名称', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              var reg = /^[\u4E00-\u9FA5]+$/g
              if (!reg.test(value)) {
                callback(new Error('非法输入'))
              } else {
                ('blur')
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        condion1: [
          { validator: checkNum, trigger: 'blur' }
        ],
        condion2: [
          { validator: checkNum, trigger: 'blur' }
        ],
        condion3: [
          { validator: checkNum, trigger: 'blur' }
        ],
        condion4: [
          { validator: checkNum, trigger: 'blur' }
        ],
        condion5: [
          { validator: checkNum, trigger: 'blur' }
        ],
        condion6: [
          { validator: checkNum, trigger: 'blur' }
        ]

        // condion1: [
        //   { required: true, message: "请输入数字", trigger: "blur" },
        //   {
        //     validator: (rule, value, callback) => {
        //       var reg = /^\s*$/g;
        //       if (reg.test(value)) {
        //         callback(new Error("非法输入"));
        //       } else {
        //         trigger: "blur";
        //         callback();
        //       }
        //     },
        //     trigger: "blur"
        //   }
        // ],
        // condion2: [
        //   { required: true, message: "请输入数字", trigger: "blur" },
        //   {
        //     validator: (rule, value, callback) => {
        //       var reg = /^\s*$/g;
        //       if (reg.test(value)) {
        //         callback(new Error("非法输入"));
        //       } else {
        //         trigger: "blur";
        //         callback();
        //       }
        //     },
        //     trigger: "blur"
        //   }
        // ],
        // condion3: [
        //   { required: true, message: "请输入数字", trigger: "blur" },
        //   {
        //     validator: (rule, value, callback) => {
        //       var reg = /^\s*$/g;
        //       if (reg.test(value)) {
        //         callback(new Error("非法输入"));
        //       } else {
        //         trigger: "blur";
        //         callback();
        //       }
        //     },
        //     trigger: "blur"
        //   }
        // ],
        // condion4: [
        //   { required: true, message: "请输入数字", trigger: "blur" },
        //   {
        //     validator: (rule, value, callback) => {
        //       var reg = /^\s*$/g;
        //       if (reg.test(value)) {
        //         callback(new Error("非法输入"));
        //       } else {
        //         trigger: "blur";
        //         callback();
        //       }
        //     },
        //     trigger: "blur"
        //   }
        // ],
        // condion5: [
        //   { required: true, message: "请输入数字", trigger: "blur" },
        //   {
        //     validator: (rule, value, callback) => {
        //       var reg = /^\s*$/g;
        //       if (reg.test(value)) {
        //         callback(new Error("非法输入"));
        //       } else {
        //         trigger: "blur";
        //         callback();
        //       }
        //     },
        //     trigger: "blur"
        //   }
        // ],
        // condion6: [
        //   { required: true, message: "请输入数字", trigger: "blur" },
        //   {
        //     validator: (rule, value, callback) => {
        //       var reg = /^\s*$/g;
        //       if (reg.test(value)) {
        //         callback(new Error("非法输入"));
        //       } else {
        //         trigger: "blur";
        //         callback();
        //       }
        //     },
        //     trigger: "blur"
        //   }
        // ]
      },
      // 标签数据
      rdtagData: [],
      multipleSelection: [],
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        }
      ],
      showVal: '',
      sortVal: '',
      labelname: '编辑标签类型',
      editname: '添加标签类型',
      addlevelDialog: false, // 添加标签弹窗
      editlevelDialog: false, // 编辑标签弹窗

      // 分页
      pageNum: 1,
      pageSize: 3,
      currentPage: 1,
      dataTotal: '',
      delcode: '',
      rdType: 'rd'
    }
  },
  created() {
    this.getrdTag()
    console.log(this.rdType)
  },
  methods: {
    // 获取标签
    getrdTag() {
      getTagList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        tagType: this.rdType
      }).then(res => {
        console.log(res)
        this.rdtagData = res.data.list
        this.dataTotal = res.data.total
        for (let i = 0; i < res.data.list.length; i++) {
          this.tagType = res.data.list[i].tagType
          //  console.log(this.tagType);
        }
        // console.log(this.dataTotal)
        //  this.condition= this.tagData.map((item)=>{
        //     var str =JSON.parse(item.tagCondition)
        //    return str
        //   })
      })
    },
    // 删除标签
    handleDelete(code) {
      const codes = []
      codes.push(code)
      this.$confirm('确认删除标签吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 拿取删除的id编号
        // 每一条数据的记录
        // 删除数据 传输id回后端
        delTagList(codes).then(res => {
          if (res.code == 200) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.reload()
          }
        })
      })
    },
    // 批量删除
    delSelectTag() {
      console.log('555555 :', 555555)
      const codes = []
      for (const k in this.multipleSelection) {
        codes.push(this.multipleSelection[k].tagCode)
      }
      this.$confirm('确认删除选中标签吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 拿取删除的id编号
        // 每一条数据的记录
        // 删除数据 传输id回后端
        delTagList(codes).then(res => {
          if (res.code == 200) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.reload()
          }
        })
      })
    },
    // 添加标签
    addsubmitForm(formName1) {
      this.$refs[formName1].validate(valid => {
        if (valid) {
          const addtag = {
            tagName: this.ruleForm1.bname,
            tagType: this.rdType,
            condition: [
              {
                date: this.ruleForm1.bcondion1,
                count: this.ruleForm1.bcondion2,
                index: 1
              },
              {
                date: this.ruleForm1.bcondion3,
                count: this.ruleForm1.bcondion4,
                index: 2
              }
            ]
          }
          axios({
            method: 'post',
            data: addtag,
            url: '/tag/savetag',
            headers: { 'Content-type': 'application/json' }
          }).then(res => {
            // console.log('111111',res)
            this.getrdTag()
            this.reload()
          })
          // console.log(addtag);
          // getsaveTag([addtag]).then(res => {
          //   if (res.data) {
          //     this.getTag();
          //   }
          // });
          this.addlevelDialog = false
          this.$refs[formName1].resetFields()
          this.$message.success('添加成功')
          // alert("submit");
        } else {
          this.$message.error('添加失败')
          // this.$refs[formName1].resetFields()
        }
      })
    },
    // 取消
    cancel(formName1) {
      this.$refs[formName1].resetFields()
    },
    // 编辑标签
    editsubmitForm(formName) {
      this.$refs[formName].validate(valid => {
        console.log(this.rdType)
        if (valid) {
          const edittag = {
            // tagName: this.ruleForm1.bname,
            tagName: this.ruleForm.name,
            tagType: this.rdType,
            tagCode: this.code,
            condition: [
              {
                date: this.ruleForm.condion1,
                count: this.ruleForm.condion2,
                index: 1
              },
              {
                date: this.ruleForm.condion3,
                count: this.ruleForm.condion4,
                index: 2
              }
            ]
          }
          console.log(edittag)
          // alert("submit");
          axios({
            method: 'post',
            data: edittag,
            url: '/tag/updateTagAndUser',
            headers: { 'Content-type': 'application/json' }
          }).then(res => {
            console.log('bbb', res)
            this.getrdTag()
            this.editlevelDialog = false
            // this.ruleForm.name = ''
            // this.ruleForm.bcondion1 = ''
            // this.ruleForm.bcondion3 = ''
            // this.ruleForm.bcondion2 = ''
            // this.ruleForm.bcondion4 = ''
          })
          // alert(submit);
          this.$message.success('编辑成功')
        } else {
          this.$message.error('编辑失败')
          // return false
        }
      })
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      this.pageSize = val
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      // 第几页数据等于跳转页面数据
      this.pageNum = currentPage
      this.getrdTag()
      // console.log(`当前页: ${currentPage}`);
    },
    // 编辑标签类型
    editDialog() {},
    // 编辑
    handleClick(index, row) {
      console.log(row)
      this.tagType = row.tagType
      this.code = row.tagCode
      this.id = row.id
      this.ruleForm.name = row.tagName
      this.ruleForm.condion1 = row.tagCondition[0].date
      this.ruleForm.condion2 = row.tagCondition[0].count
      this.ruleForm.condion3 = row.tagCondition[1].date
      this.ruleForm.condion4 = row.tagCondition[1].count
    }
  }
}
</script>
<style lang="scss" scoped>
.label-container {
  padding: 0 110px 0 26px;
  margin: 16px 0;
  width: 100%;
  overflow: auto;
  min-height: 1200px;
  .dashboard-text {
    margin-top: 17px;
    width: 1517px;
    height: 37px;
    .lef {
      line-height: 37px;
      font-size: 16px;
      font-weight: 900;
      color: #333;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      i {
        display: inline-block;
        width: 11px;
        height: 20px;
        background: #488dff;
        border-radius: 4px;
        margin-right: 12px;
      }
    }
  }
  .data-list {
    // width: 1549px;
    // height: 669px;

    .dhead {
    }
    .daction {
      width: 100%;
      height: 88px;
      padding: 24px 0;
      //   background: #ccc;
      .dacon {
        overflow: hidden;
        li {
          float: left;
          width: 106px;
          height: 40px;
          background: rgba(72, 141, 255, 1);
          border-radius: 2px;
          line-height: 38px;
          font-size: 15px;
          cursor: pointer;
          color: #fff;
          margin-right: 25px;
          text-align: center;
          &:nth-child(1) {
            width: 163px;
          }
        }
        .con {
          width: 120px;
          // border: 1px solid rgba(203, 203, 203, 1);
          color: #999;
          background: #fff;
          position: relative;
          // &:after {
          //   content: "";
          //   display: inline-block;
          //   width: 0px;
          //   height: 0px;
          //   border-top: 8px solid #333;
          //   border-left: 8px solid transparent;
          //   border-right: 8px solid transparent;
          //   position: absolute;
          //   top: 16px;
          //   left: 90px;
          //   margin-left: 8px;
          // }
        }
      }
    }
    .action {
      p {
        line-height: 50px;
        cursor: pointer;
        height: 31px;
      }
    }
  }
  .pagination-block {
    bottom: -117px;
    // right: 349px;
  }
  // 对话框
  .dialog {
    width: 844px;
    .header-title {
      height: 56px;
      overflow: hidden;
      // background: #ccc;
      .lef {
        float: left;
        line-height: 37px;
        font-size: 16px;
        font-weight: 900;
        color: #333;
        i {
          float: left;
          margin-top: 8.5px;
          width: 11px;
          height: 20px;
          background: rgba(72, 141, 255, 1);
          border-radius: 4px;
          margin-right: 12px;
        }
      }
      .rig {
        float: right;
        display: block;
        width: 22px;
        height: 22px;
      }
    }
    //
    .dialog-bd {
      width: 844px;
      margin: 0 auto;
      p {
        // margin-bottom: 30px;
        overflow: hidden;
        padding-bottom: 15px;
      }
      .editlabel {
        // width: 149px;
        height: 27px;
        text-align: left;
        display: inline-block;
        font-size: 14px;
      }
      label {
        font-size: 14px;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: #333333;
        text-align: left;
      }
      input {
        width: 100px;
        height: 40px;
        line-height: 40px;
        border: 1px solid rgba(204, 204, 204, 1);
        border-radius: 2px;
      }
      .dialog-footer {
        .el-button {
          width: 100px;
          height: 40px;
          background: rgba(204, 204, 204, 1);
          border-radius: 2px;
        }
      }
    }
  }
}
</style>
